<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <my-breadcrumb>素材管理</my-breadcrumb>
      </div>
      <!-- 下方内容 -->
      <div style="padding-bottom: 20px">
        <!-- 这是一个单选按钮组合,只不过是一个带样式的单选按钮
        v-model="isCollected" 默认值是false -->
        <el-radio-group v-model="isCollected" size="mini" @change="hToggle">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button
          type="success"
          size="mini"
          style="float: right"
          @click="dialogVisible = true"
          >上传图片素材</el-button
        >
      </div>
      <!-- /素材列表 -->
      <el-row :gutter="10"  style="margin-top: 20px">
        <el-col
          :span="4"
          v-for="image in images"
          :key="image.id"
          class="img_item"
        >
          <el-image
            style="height: 180px; width: 180px"
            :src="image.url"
            fit="cover"
          ></el-image>
          <!-- 这个是让下面的标识组件在收藏选项中不可见 -->
          <div class="option" v-show="!isCollected">
            <span
              class="el-icon-star-off"
              :class="{ red: image.is_collected }"
              @click="hToggleCollect(image)"
            ></span>
            <span class="el-icon-delete" @click="hDelete(image)"></span>
          </div>
        </el-col>
      </el-row>
      <!-- /素材列表 -->
      <!-- 分页 current-page当前页数，支持 .sync 修饰符 -->
      <el-pagination
        :current-page.sync="curPage"
        :disabled="isLoading"
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="hPageChange"
        :total="total_count">
      </el-pagination>
      <!-- 分页 -->
    </el-card>
    <!-- 加载一个弹出层 点击只后会弹出一个对话框-->
    <el-dialog append-to-body title="上传素材" :visible.sync="dialogVisible">
      <el-upload
        class="avatar-uploader"
        action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
        :headers="headers"
        name="image"
        :show-file-list="false"
        :on-success="hSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <!-- 当上传成功之后，imageUrl就会有值，此时做预览
            给img设置了src后，显示图片内容的过程是异步的 ---- 并不是设了src后就可以立即看到图片的
            问：你怎么知道图片已经完成了加载？
          -->
        <el-image
          v-if="imageUrl"
          :src="imageUrl"
          class="avatar"
          @load="hLoadUploadImage"
        />
        <!-- 没有上传之前，这里是一个大大的 + -->
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'images',
  data () {
    return {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      // radio1: '全部',
      isLoading: false, // 是否显示加载中
      images: [], // 保存获取的图片
      curPage: 1, // 当前查询第几页
      total_count: 0, // 查询的总数量
      isCollected: false, // 是否是 收藏的图片， true表示是收藏，false表示是全部
      dialogVisible: false, // 是否显示弹出对话框
      imageUrl: '' // 用来存储图片的地址
    }
  },
  created () {
    // 调用加载图片的函数
    this.loadImages()
  },
  methods: {
    // 创建参数的函数
    creatParams () {
      const paramObj = {
        collect: this.isCollected, // 是否是收藏的图片
        page: this.curPage, // 动态生成需要的页面
        per_page: 10
      }
      return paramObj
    },
    // 加载图片,这个是封装的函数
    loadImages () {
      const paramObj = this.creatParams()
      // 自己的一个错误,不加括号,传过去的就是一个函数,而不是函数的值
      // console.log(paramObj)
      this.$axios({
        url: '/mp/v1_0/user/images',
        method: 'GET',
        params: paramObj
      })
        .then((res) => {
          this.images = res.data.data.results
          // 如果没有这个总数,下面的分页栏就不会显示1234这样的按钮
          this.total_count = res.data.data.total_count
        })
        .catch((err) => {
          console.log(err)
          this.images = []
          this.total_count = 0
          this.$message.error('获取图片列表失败')
        })
    },
    // 点击按钮切换页面
    hPageChange (page) {
      this.curPage = page
      // console.log(this.curPage)
      this.loadImages()
    },
    // 切换全部还是收藏的图片,这时收藏的状态已经改变,参数已经改变,获取的值就会不同
    hToggle () {
      // console.log(this.isCollected)
      this.curPage = 1
      this.loadImages()
    },
    // 上传成功后的处理函数,插件自带的,它的默认回调值是括号中的值
    hSuccess (res, file) {
      // console.log(res, file)
      // 把全新的地址填充到自己的本地数据中
      this.imageUrl = res.data.url
      // 重新加载页面
      this.loadImages()
    },
    // 附件要求的处理函数,判断文件类型
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 图片加载成功后清除弹框
    hLoadUploadImage () {
      console.log('图片加载完成...')
      setTimeout(() => {
        this.imageUrl = ''
        this.dialogVisible = false
      }, 2000)
    },
    // 切换收藏的状态
    hToggleCollect (image) {
      this.$axios({
        method: 'PUT',
        url: '/mp/v1_0/user/images/' + image.id,
        data: {
          collect: !image.is_collected
        }
      })
        .then((res) => {
          console.log(res)
          this.$message.success('操作成功')
          image.is_collected = !image.is_collected
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('操作失败')
        })
    },
    // 点击删除图片
    hDelete (image) {
      this.$confirm('你确定要删除吗？')
        .then(() => {
          // 调用封装的删除函数
          this.doDelete(image.id)
        })
        .catch(() => {
          // 取消不会发生任何事
        })
    },
    // 单独封装删除图片的函数
    doDelete (id) {
      this.$axios({
        method: 'delete',
        url: '/mp/v1_0/user/images/' + id
      })
        .then((res) => {
          // console.log(res)
          this.$message.success('删除成功')
          this.loadImages()
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang = 'less' scoped>
.red {
  color: red;
}
.img_item {
  position: relative;
  box-sizing: border-box;
}
.option {
  position: absolute;
  left: 5px;
  width: 180px;
  bottom: 5px;
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
  span {
    margin: 0 30px;
    cursor: pointer;
  }
}
.avatar-uploader {
  text-align: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
